.test-enter,
.test-appear {
  opacity: 0;
}
/* //进场过程中 */
.test-enter-active,
.test-appear-active {
  opacity: 1;
  transition: opacity 2000ms;
}
/* //进场之后 */
.test-enter-done {
  opacity: 1;
}
/* //离开前的瞬间 */
.test-exit {
  opacity: 1;
}
/* //离开过程中 */
.test-exit-active {
  opacity: 0;
  transition: opacity 2000ms;
}
/* //离开后 */
.test-exit-done {
  opacity: 0;
}

.box-enter {
  /*
  进入动画执行之前绑定的类名
  */
  width: 0;
  height: 0;
  opacity: 0;
  background: skyblue;
}

.box-enter-active {
  /*
  进入动画执行过程中绑定的类名
  */
  width: 100px;
  height: 100px;
  opacity: 1;
  transition: all 3s;
}

.box-enter-done {
  /*
  进入动画执行完毕之后绑定的类名
  */
  width: 100px;
  height: 100px;
  opacity: 1;
  background: red;
}
.box-exit {
  /*
  退出动画执行之前绑定的类名
  */
  width: 100px;
  height: 100px;
  opacity: 1;
  background: red;
}

.box-exit-active {
  /*
  退出动画执行过程中绑定的类名
  */
  width: 0;
  height: 0;
  opacity: 0;
  transition: all 3s;
}

.box-exit-done {
  /*
  退出动画执行完毕之后绑定的类名
  */
  width: 0;
  height: 0;
  opacity: 0;
  background: skyblue;
}
